<template>
    <div>
        <el-table :data="categories" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <SourcesTable :sources="props.row.sources"></SourcesTable>
                </template>
            </el-table-column>
            <el-table-column label="分类名称" prop="category.name"></el-table-column>
            <el-table-column label="资源总数" prop="sourcesCount"></el-table-column>
            <el-table-column label="排序序号" prop="category.sortNum"></el-table-column>
            <el-table-column label="操作列表" prop="category.id">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="editCategory(scope.row)">编辑</el-button>
                    <el-button type="text" icon="el-icon-edit" @click="showDelDialog(scope.row)">删除</el-button>
                    <el-button type="text" icon="el-icon-edit" @click="toAddSources(scope.row)">新增资源</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="编辑分类信息" :visible.sync="dialogFormVisible">
            <el-form :model="category"
                     status-icon ref="category" label-width="80px">
                <el-form-item label="分类名称"
                              prop="name"
                              :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }]">
                    <el-input v-model="category.name"
                              type="text"
                              show-word-limit
                              maxlength="10"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序序号"
                              prop="sortNum"
                              :rules="[
                                { required: true, message: '序号不能为空'}
                              ]">
                    <el-input v-model="category.sortNum"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateCategory('category')">更改</el-button>
            </div>
        </el-dialog>
        <el-dialog title="新增分类模块" :visible.sync="dialogAddCategoryVisible">
            <el-form :model="addCategory"
                     status-icon ref="addCategory" label-width="80px">
                <el-form-item label="分类名称"
                              prop="name"
                              :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }]">
                    <el-input v-model="addCategory.name"
                              type="text"
                              show-word-limit
                              maxlength="10"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序序号"
                              prop="sortNum"
                              :rules="[
                                { required: true, message: '序号不能为空'}
                              ]">
                    <el-input v-model="addCategory.sortNum"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddCategoryVisible = false">取 消</el-button>
                <el-button type="primary" @click="addNewCategory('addCategory')">新 增</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="dialogName" :visible.sync="dialogAddSourcesVisible">
            <div style="padding-bottom: 20px;padding-right: 10px" align="right">
                <el-link type="primary" @click="toAddCategory">没有分类信息？点击添加</el-link>
            </div>
            <el-form :model="addSources"
                     status-icon ref="addSources" label-width="80px">
                <el-form-item label="资源名称"
                              prop="sourcesName"
                              :rules="[{ required: true, message: '请输入资源名称', trigger: 'blur' }]">
                    <el-input v-model="addSources.sourcesName"
                              type="text"
                              show-word-limit
                              maxlength="10"
                              autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="资源地址"
                              prop="sourcesUrl"
                              :rules="[{ required: true, message: '请输入以http(s)://开头的网络资源地址', trigger: 'blur' }]">
                    <el-input v-model="addSources.sourcesUrl"
                              type="text"
                              show-word-limit
                              maxlength="100"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="资源描述"
                              prop="sourcesDesc"
                              :rules="[{ required: true, message: '请输该网站的描述信息', trigger: 'blur' }]">
                    <el-input v-model="addSources.sourcesDesc"
                              type="text"
                              show-word-limit
                              maxlength="120"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序序号"
                              prop="sortNum"
                              :rules="[
                                { required: true, message: '序号不能为空'},
                              ]">
                    <el-input v-model="addSources.sortNum"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddSourcesVisible = false">取 消</el-button>
                <el-button type="primary" @click="addNewSources('addSources')">添加</el-button>
            </div>
        </el-dialog>
        <el-dialog title="删除提示" :visible.sync="delVisible" width="40%">
            <span style="color: red">删除模块将会永久丢失模块中的分类资源 <br>请确保该分类资源可弃或转移备份，如需删除请点击确定删除</span>

            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">稍等一下</el-button>
                <el-button type="primary" @click="deleteCategory">确定删除</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import SourcesTable from "./SourcesTable";
    import {addNewCategoryServer, addNewSourcesServer, delCategoryServer, updateCategoryServer} from '../../services'

    export default {
        name: "CategoryTable",
        components: {SourcesTable},
        props: ["categories"],
        data() {
            return {
                dialogAddSourcesVisible: false,
                dialogAddCategoryVisible: false,
                dialogFormVisible: false,
                delVisible: false,
                delCategory: {},
                addSources: {},
                addCategory: {},
                dialogName: '',
                category: {}
            }
        },
        created() {
            this.createFirstCategory();
        },
        methods: {
            createFirstCategory() {
                const cNum = localStorage.getItem("cNum")
                if (cNum ? (parseInt(cNum) < 1) : false) {
                    this.toAddCategory();
                }
            },
            deleteCategory() {
                //删除属于敏感操作，需要二次确认
                delCategoryServer(this.delCategory.id).then(res => {
                    if (res.code === 2000) {
                        this.$message({type: 'success', message: '删除数据成功'})
                        this.delVisible = false;
                        this.reFlushData("categoryShow")
                    }
                })

            },
            showDelDialog(row) {
                this.delCategory = row.category
                this.delVisible = true
            },

            addNewCategory(addCategory) {
                this.$refs[addCategory].validate((valid) => {
                    if (valid) {
                        addNewCategoryServer(this.addCategory).then(res => {
                            if (res.code === 2000) {
                                this.$message({type: 'success', message: '添加模块成功'})
                                this.dialogAddCategoryVisible = false;
                                this.toAddSourcesAndOpenIt(res.data.id, res.data.name)
                            }
                        })
                    } else {
                        return false;
                    }
                });

            },
            toAddCategory() {
                this.dialogAddSourcesVisible = false;
                this.dialogAddCategoryVisible = true;
            },
            reFlushData(show) {
                this.$emit("reShow", show)
            },
            addNewSources(addSources) {
                this.$refs[addSources].validate((valid) => {
                    if (valid) {
                        addNewSourcesServer(this.addSources).then(res => {
                            if (res.code === 2000) {
                                this.$message({type: 'success', message: '修改成功'})
                                this.category = {}
                                this.dialogAddSourcesVisible = false;
                                //重载模块刷新数据
                                this.reFlushData("categoryShow")
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            toAddSources(row) {
                this.toAddSourcesAndOpenIt(row.category.id, row.category.name)
            },
            toAddSourcesAndOpenIt(categoryId, categoryName) {
                this.addSources = {
                    categoryId: categoryId
                }
                this.dialogName = '新增资源到 ->' + categoryName;
                this.dialogAddSourcesVisible = true
            },
            updateCategory(category) {
                this.$refs[category].validate((valid) => {
                    if (valid) {
                        const update = {
                            categoryId: this.category.id,
                            categoryName: this.category.name,
                            sortNum: this.category.sortNum
                        };
                        updateCategoryServer(update).then(res => {
                            if (res.code === 2000) {
                                this.$message({type: 'success', message: '修改成功'})
                                this.category = {}
                                this.dialogFormVisible = false
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            editCategory(row) {
                this.category = row.category
                this.dialogFormVisible = true
            },

        }
    }
</script>

<style scoped>

</style>